<template>
	<view class="">
		<!-- 悬浮按钮菜单 -->
		<view class="shopro-float-btn">
			<button class="wechat-btn u-reset-button" @tap="onBtn">
        <view class="number" v-if="cartNumber>0">{{cartNumber}}</view>
        <u-icon name="shopping-cart" color="#000" size="50"></u-icon>
			</button>
		</view>
	</view>
</template>

<script>
/**
 * 悬浮按钮，悬浮菜单。全局通用，数据为vuex初始化导入。
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import Auth from '@/shopro/permission/index.js';
export default {
	components: {},
	data() {
		return {
			platform: this.$platform.get()
		};
	},
	props: {},
	computed: {
    ...mapGetters(['cartNum']),
    cartNumber(){
      return this.cartNum
    }

	},
	created() {
    console.log("======cartNumber",this.cartNumber)
  },
	methods: {
		hideMask() {

		},
		// 点击悬浮按钮
		onBtn() {
      this.jump('/pages/index/cart')
		},
    jump(path, query) {
      this.$Router.push({
        path: path,
        query: query
      });
    }
	}
};
</script>

<style lang="scss">
.shopro-float-btn {
  overflow: inherit;
	position: fixed;
	bottom: calc(var(--window-bottom) + 150rpx);
	right: 30rpx;
	z-index: 9999;
	.wechat-btn {
    overflow: inherit;
    background: #fff;
		box-shadow: 0px 0px 20px 4px rgba(199, 199, 199, 0.22);
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    position: relative;
    .number{
      position: absolute;
      top: -6rpx;
      right: 0;
      width: 26rpx;
      height: 26rpx;
      border-radius: 50%;
      background: #333333;
      color: #fff;
      z-index: 200;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
    }
	}
}
</style>
